<template>
	<view class="conent">
		<view class="conent_box">
			<view class="orderStatus">
				<u-row v-if="order.orderStatus=='1'||order.orderStatus=='2'||order.orderStatus=='3'">
					<u-col span="6" customStyle="padding:20rpx;">
						<u--image :src="'https://fengfujiafile.oss-cn-hangzhou.aliyuncs.com/adopt/static/page/delivery'+order.orderStatus+'.png'" width="40px"
							height="40px" customStyle="float:right;"></u--image>
					</u-col>
					<u-col span="6">
						<u--text :text="navList[order.orderStatus].title" size="18" bold lineHeight="20"
							color="#fff"></u--text>
						<u--text :text="'快递正发往'+order.address.substring(0,2)" size="12" lineHeight="20"
							color="#fff"></u--text>
					</u-col>
				</u-row>
				<view v-if="order.orderStatus=='0'">
					<!-- <view> -->
					<u--text text="待付款" size="18" bold lineHeight="30" align="center" color="#fff"></u--text>
					<u-row>
						<u-col span="1"></u-col>
						<u-col span="4" customStyle="padding:20rpx;display:flex;">
							<u--text text="付款金额:" size="12" block color="#fff"></u--text>
							<u--text :text="order.totalAmout" size="12" mode="price" block color="#fff"></u--text>
						</u-col>
						<u-col span="2"></u-col>
						<u-col span="4" customStyle="display:flex;">
							<u--text text="剩余:" size="12" block color="#fff"></u--text>
							<u--text :text="order.expire+'秒'" size="12" block color="#fff"></u--text>
						</u-col>
						<u-col span="1"></u-col>
					</u-row>
				</view>
			</view>
			<view class="order">
				<u-row customStyle="margin: 10rpx;border-bottom:4rpx solid #fafafa;"
					v-for="(items, indexs) in order.items" :key="indexs">
					<u-col span="4">
						<u--image :src="items.goodsImage" width="80px" height="80px" radius="10"></u--image>
					</u-col>
					<u-col span="8">
						<u-row>
							<u-col span="8">
								<u--text :text="items.goodsName" size="14" bold align="left" color="#000000"></u--text>
							</u-col>
							<u-col span="4">
								<u--text :text="items.price" size="14" bold mode="price" align="right"
									color="#000000"></u--text>
							</u-col>
						</u-row>
						<view style="height:40rpx"></view>
						<u--text :text="'数量'+items.quantity" size="14" bold align="left" color="#999999"></u--text>
					</u-col>
				</u-row>
				<u-line color="#F5F5F5"></u-line>
				<u-row>
					<u-col span="6">
						<u--text text="商品金额" size="14" lineHeight="24" bold align="left" color="#626574"></u--text>
					</u-col>
					<u-col span="6">
						<u--text :text="order.totalAmout" size="14" bold mode="price" align="right"
							color="#FA5850"></u--text>
					</u-col>
				</u-row>
				<!-- <u-row>
					<u-col span="6">
						<u--text text="运费" size="14" lineHeight="24" bold align="left" color="#626574"></u--text>
					</u-col>
					<u-col span="6">
						<u--text text="12" size="14" bold mode="price" align="right" color="#FA5850"></u--text>
					</u-col>
				</u-row>
				<u-row>
					<u-col span="6">
						<u--text text="优惠" size="14" lineHeight="24" bold align="left" color="#626574"></u--text>
					</u-col>
					<u-col span="6">
						<u--text text="-￥12" size="14" bold align="right" color="#FA5850"></u--text>
					</u-col>
				</u-row> -->
			</view>
			<view class="address">
				<u-row>
					<u-col span="11">
						<u--text :text="order.address" size="14" lineHeight="30" bold align="left"
							color="#000000"></u--text>
						<u-row>
							<u-col span="4">
								<u--text :text="order.receiver" size="14" lineHeight="30" bold align="left"
									color="#000000"></u--text>
							</u-col>
							<u-col span="8">
								<u--text :text="order.phoneNumber" size="14" mode="phone" lineHeight="30" bold
									align="left" color="#000000"></u--text>
							</u-col>
						</u-row>
					</u-col>
					<u-col span="1">
						<!-- <u--text text="〉" size="14" lineHeight="30" bold align="right" color="#000000"></u--text> -->
						<!-- <u-icon name="arrow-right"></u-icon> -->
						<u-button text="" icon="arrow-right" customStyle="border:none;" @click="getAddress"></u-button>

					</u-col>
				</u-row>

			</view>
			<view class="infor">
				<u-row>
					<u-col span="6">
						<u--text text="交易金额" size="14" lineHeight="30" align="left" color="#626574"></u--text>
					</u-col>
					<u-col span="6">
						<u--text :text="order.totalAmout" size="22" mode="price" align="right"
							color="#16171C"></u--text>
					</u-col>
				</u-row>
				<u-row>
					<u-col span="4">
						<u--text text="订单编号" size="14" lineHeight="30" align="left" color="#626574"></u--text>
					</u-col>
					<u-col span="8">
						<u-row>
							<u-col span="9">
								<u--text :text="order.orderId" size="14" align="left" color="#16171C"></u--text>
							</u-col>
							<u-col span="1">
								|
							</u-col>
							<u-col span="2">
								<u-button text="复制" :hairline="false" @click="modalConfirm"
									customStyle="border:none;"></u-button>
							</u-col>
						</u-row>
					</u-col>
				</u-row>
				<u-row>
					<u-col span="6">
						<u--text text="支付方式" size="14" lineHeight="30" align="left" color="#626574"></u--text>
					</u-col>
					<u-col span="6">
						<u--text text="微信支付" size="14" align="right" color="#16171C"></u--text>
					</u-col>
				</u-row>
				<u-row v-if="order.payTime">
					<u-col span="6">
						<u--text text="支付时间" size="14" lineHeight="30" align="left" color="#626574"></u--text>
					</u-col>
					<u-col span="6">
						<u--text :text="order.payTime" size="14" align="right" color="#16171C"></u--text>
					</u-col>
				</u-row>
				<u-row v-if="order.createTime">
					<u-col span="6">
						<u--text text="下单时间" size="14" lineHeight="30" align="left" color="#626574"></u--text>
					</u-col>
					<u-col span="6">
						<u--text :text="order.createTime" size="14" align="right" color="#16171C"></u--text>
					</u-col>
				</u-row>
				<u-row v-if="order.deliveryTime">
					<u-col span="6">
						<u--text text="发货时间" size="14" lineHeight="30" align="left" color="#626574"></u--text>
					</u-col>
					<u-col span="6">
						<u--text :text="order.deliveryTime" size="14" align="right" color="#16171C"></u--text>
					</u-col>
				</u-row>
				<u-row v-if="order.completeTime">
					<u-col span="6">
						<u--text text="收货时间" size="14" lineHeight="30" align="left" color="#626574"></u--text>
					</u-col>
					<u-col span="6">
						<u--text :text="order.completeTime" size="14" align="right" color="#16171C"></u--text>
					</u-col>
				</u-row>
			</view>
		</view>
		<view class="flex">
			<u-row>
				<u-col span="6" v-if="order.orderStatus=='0'"></u-col>
				<u-col span="9" v-if="order.orderStatus=='2'||order.orderStatus=='3'"></u-col>
				<u-col span="3" v-if="order.orderStatus=='0'" customStyle="padding:0 10rpx;">
					<u-button text="取消订单" color="#999999" size="normal" @click="cancelOrder"
						customStyle="height:60rpx; line-height:60rpx; border-radius:40rpx;"></u-button>
				</u-col>
				<u-col span="3" v-if="order.orderStatus=='3'&&item.evaluateFlag!='1'" customStyle="padding:0 10rpx;">
					<u-button text="评价" color="#07BFA5" size="normal" @click="evaluate"
						customStyle="height:60rpx; line-height:60rpx; border-radius:40rpx;"></u-button>
				</u-col>
				<!-- <u-col span="3" v-if="order.orderStatus=='3'&&item.evaluateFlag=='1'" customStyle="padding:0 10rpx;">
					<u-button text="评价" color="#07BFA5" size="normal" @click="evaluate"
						customStyle="height:60rpx; line-height:60rpx; border-radius:40rpx;"></u-button>
				</u-col> -->
				<u-col span="3" v-if="false" customStyle="padding:0 10rpx;">
					<u-button text="查看物流" color="#07BFA5" size="normal" @click="logistics"
						customStyle="height:60rpx; line-height:60rpx; border-radius:40rpx;"></u-button>
				</u-col>
				<u-col span="3" v-if="order.orderStatus=='2'" customStyle="padding:0 10rpx;">
					<u-button text="确认收货" color="#07BFA5" size="normal" @click="receipt"
						customStyle="height:60rpx; line-height:60rpx; border-radius:40rpx;"></u-button>
				</u-col>
				<u-col span="3" v-if="order.orderStatus=='0'" customStyle="padding:0 10rpx;">
					<u-button text="立即付款" color="#07BFA5" size="normal" @click="pay"
						customStyle="height:60rpx; line-height:60rpx; border-radius:40rpx;"></u-button>
				</u-col>
			</u-row>
		</view>
		<u-popup :show="show" closeable @close="close" @open="open">
			<view class="show">
				<u--text text="取消原因" size="14" bold align="center" color="#16171C"></u--text>
				<u-radio-group v-model="cancelReason" placement="column" activeColor="#FD574A" @change="groupChange">
					<u-radio customStyle="margin-bottom: 20rpx;" v-for="(item, index) in cancelList" :key="index"
						:label="item.itemText" :name="item.itemValue" @change="cancelChange">
					</u-radio>
				</u-radio-group>
				<u-row customStyle="margin:20rpx 0;">
					<u-col span="6" customStyle="padding:0 10rpx;">
						<u-button text="确认取消" color="#07BFA5" size="normal" @click="verifyCancel"
							customStyle="height:60rpx; line-height:60rpx; border-radius:40rpx;"></u-button>
					</u-col>
					<u-col span="6" customStyle="padding:0 10rpx;">
						<u-button text="再想想" color="#999999" size="normal" @click="close"
							customStyle="height:60rpx; line-height:60rpx; border-radius:40rpx;"></u-button>
					</u-col>
				</u-row>
			</view>
		</u-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		watch
	} from 'vue'
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		orderDetail,
		cancelReasons,
		orderCancel
	} from "@/api/pages/goods.js"
	import router from '@/api/router';
	const navbarTitle = ref("我的订单")
	const status = ref("")
	const navList = ref([{
			status: '0',
			title: "待付款"
		},
		{
			status: '1',
			title: "待发货"
		},
		{
			status: '2',
			title: "待收货"
		},
		{
			status: '3',
			title: "已签收"
		}
	])
	const order = ref({})
	const show = ref(false)
	const cancelList = ref([])
	const cancelReason = ref('')
	onLoad((options) => {
		// status.value = JSON.parse(options.orderInfo).orderStatus
		// order.value = JSON.parse(options.orderInfo)
		getOrderDetail(options.orderId)
	})
	const getOrderDetail = async (id) => {
		const res = await orderDetail(id).then()
		console.log(res);
		order.value = res.result
		switch (order.value.orderStatus) {
			case '0':
				navbarTitle.value = "待付款"
				break;
			case '1':
				navbarTitle.value = "待发货"
				break;
			case '2':
				navbarTitle.value = "待收货"
				break;
			case '3':
				navbarTitle.value = "已完成"
				break;
			default:
				navbarTitle.value = "全部订单"
		}
	}
	const modalConfirm = () => {
		uni.setClipboardData({
			data: order.orderId, //text是要复制的文本
			success: function(res) {
				uni.getClipboardData({
					//这个api是把拿到的数据放到剪切板中的
					success: function(res) {
						uni.showToast({
							title: '复制成功',
							icon: "none",
						})
					}
				})
			}
		})
	}
	const getAddress = () => {
		router.navigateTo({
			url: "/pageD/feature/address"
		})
	}
	const cancelOrder = () => {
		console.log("cancelOrder---")
		show.value = true
		getCancelReasons()
	}
	const getCancelReasons = async () => {
		const res = await cancelReasons().then()
		cancelList.value = res.result
	}
	const open = () => {
		console.log('open');
	}
	const close = () => {
		show.value = false
		// console.log('close');
	}
	const groupChange = (n) => {
		console.log('groupChange', n);
		cancelReason.value = n
	}
	const cancelChange = (n) => {
		console.log('evaluateChange', n);
	}
	const verifyCancel = () => {
		console.log('verifyCancel---');
		const form = {
			orderId: order.value.orderId,
			cancelReason: cancelReason.value
		}
		cancvelOrdere(form)
	}
	const cancvelOrdere = async (form) => {
		const res = await orderCancel(form).then(e => {
			uni.showToast({
				title: e.message,
				icon: 'none'
			})
			close()
			router.redirectTo({
				url: '/pageB/order/orderStatus?orderStatus=' + 0
			})
		})
	}

	const evaluate = () => {
		console.log("evaluate---")
		router.navigateTo({
			url: "/pageB/order/evaluate"
		})
	}
	const logistics = () => {
		console.log("logistics---")
	}
	const receipt = () => {
		console.log("receipt---")
	}
	const pay = () => {
		console.log("pay---")
	}
</script>

<style lang="scss" scoped>
	body {
		background: #f7f7f7;
	}

	.conent_box {
		margin-top: 0;

		.orderStatus {
			background: linear-gradient(180deg, #07BFA5 0%, #3A8678 100%);
			// background-image: radial-gradient(circle at center, red, blue);
		}

		.order,
		.address,
		.infor {
			margin: 20rpx;
			padding: 20rpx;
			border-radius: 40rpx;
			box-shadow: 2px 2px 2px rgba(0, 0, 0, .3);
			background: #fff;
		}

		.address,
		.infor {
			padding: 30rpx;
		}
	}

	.show {
		padding: 20rpx;
		border-radius: 10rpx;
	}

	.flex {
		position: fixed;
		bottom: 0;
		width: 90%;
		padding: 20rpx 5%;
		background: #fff;
		z-index: 10;
	}
</style>